<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f00;
        }
    </style>
</head>

<body>


    <div class="box">

    </div>

    <button class="a">点击出现span</button>


    <button class="b">点击出现span</button>

    <script>


        // 单例模式
        //    一个类只有一个实例


        function Fn(el, title) {
            this.el = document.querySelector(el);
            this.title = title;


            this.f()
        }

        Fn.prototype.f = function () {
            this.oSpan = document.createElement('span');
            this.oSpan.innerHTML = this.title;
            this.el.appendChild(this.oSpan);
        }


        // 希望这个Fn这个类只有一个实例
        let obj = null;



        const oBtn = document.querySelector('.a');
        oBtn.onclick = function () {
            if (!obj) {
                obj = new Fn('.box', '你好')
            }

        }


        // 第二次创建实例的时候  发现无法传参  --- 

        // const oBtn2 = document.querySelector('.b');
        // oBtn2.onclick = function () {
        //     if (!obj) {
        //         obj = new Fn('.box', 'hello')
        //     }

        // }

    </script>

</body>

</html>